<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <script src="../js/jquery-3.1.1.js"></script>
        <title></title>
        <style>
            #body{
                margin: 10px auto;
                width: 290px;
                height: 380px;
                box-sizing: border-box;
                border: 1px solid #ccc;
            }
            #body h2{
                margin: 0;
                width: 288px;
                height: 30px;
                text-align: center;
                line-height: 1.5;
                border-bottom: 2px solid black;
                box-sizing: border-box;
                font-size: 16px;
            }
            #body ul{
                list-style: none;
                margin: 0;
                padding: 0;
                margin: auto 10px;
            }
            #body ul::after{
                content: '';
                display: block;
                clear: both;
                visibility: hidden;
                height: 0;
            }
            #body ul li{
                width: 120px;
                height: 75px;
                margin: 5px;
                float: left;
                border: 1px solid #ccc;
                position: relative;
            }
            #body ul li img{
                width: 120px;
                height:75px;
                overflow: hidden;
                position: absolute;
            }
            #body ul li div{
                width: 120px;
                height: 0;
                position: absolute;
                left: 0;
                top: 37.5px;
                text-align: center;
                background-color: orange;
                line-height: 4.5;
                color: white;
                font-weight: bold;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="body">
            <h2>热门品牌</h2>
            <ul>
                <li>
                    <img src="../img/11.jpg" alt="">
                    <div>肌龄</div>
                </li>
                <li>
                    <img src="../img/22.jpg" alt="">
                    <div>肌龄</div>
                </li>
                <li>
                    <img src="../img/33.jpg" alt="">
                    <div>肌龄</div>
                </li>
                <li>
                    <img src="../img/44.jpg" alt="">
                    <div>肌龄</div>
                </li>
                <li>
                    <img src="../img/55.jpg" alt="">
                    <div>肌龄</div>
                </li>
                <li>
                    <img src="../img/66.jpg" alt="">
                    <div>肌龄</div>
                </li>
                <li>
                    <img src="../img/77.jpg" alt="">
                    <div>肌龄</div>
                </li>
                <li>
                    <img src="../img/88.jpg" alt="">
                    <div>肌龄</div>
                </li>
            </ul>
        </div>
    </body>
</html>


<script>

    $('#body ul li').hover(function(){

        $(this).children('img').stop().animate({
            height:0,
            top:75/2,
            bottom:75/2
        },100);
        $(this).children('div').stop().delay(100).animate({
            height:75,
            top:0,
            bottom:0
        },100)

    },function(){
        $(this).children('img').stop().delay(100).animate({
            height:75,
            top:0,
            bottom:0
        },100);
        $(this).children('div').stop().animate({
            height:0,
            top:75/2,
            bottom:75/2
        },100)
    })






    
</script>